<template>
    <el-tree
            :data="data"
            node-key="id"
            @node-drag-start="handleDragStart"
            @node-drag-enter="handleDragEnter"
            @node-drag-leave="handleDragLeave"
            @node-drag-over="handleDragOver"
            @node-drag-end="handleDragEnd"
            @node-drop="handleDrop"
            draggable
            :allow-drop="allowDrop"
            :allow-drag="allowDrag">
    </el-tree>
</template>
<script>
    export default {
        name:"WorkTree",
        data() {
            return {
                data: [{
                    id: 1,
                    label: '导出Excel',
                    children: [{
                        id: 4,
                        label: '二级 1-1',
                        children: [{
                            id: 9,
                            label: '三级 1-1-1'
                        }, {
                            id: 10,
                            label: '三级 1-1-2'
                        }]
                    }]
                }, {
                    id: 2,
                    label: '修改车辆信息',
                    children: [{
                        id: 5,
                        label: '二级 2-1'
                    }, {
                        id: 6,
                        label: '二级 2-2'
                    }]
                }, {
                    id: 3,
                    label: '记录可视化大屏数据',
                    children: [{
                        id: 7,
                        label: '二级 3-1'
                    }, {
                        id: 8,
                        label: '二级 3-2',
                        children: [{
                            id: 11,
                            label: '三级 3-2-1'
                        }, {
                            id: 12,
                            label: '三级 3-2-2'
                        }, {
                            id: 13,
                            label: '三级 3-2-3'
                        }]
                    }]
                }],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                user:{
                    username:'miss',
                    // works:[],
                },
            };
        },
        created(){
            if (this.$store.getters.getUserInfo){
                let userInfo=this.$store.getters.getUserInfo;
                this.user.username=userInfo.ename;
                this.user.works=this.getWorks(userInfo.eid);
                // this.hasLogin=true;
            }
        },
        methods: {
            handleDragStart(node, ev) {
                console.log('drag start', node);
            },
            handleDragEnter(draggingNode, dropNode, ev) {
                console.log('tree drag enter: ', dropNode.label);
            },
            handleDragLeave(draggingNode, dropNode, ev) {
                console.log('tree drag leave: ', dropNode.label);
            },
            handleDragOver(draggingNode, dropNode, ev) {
                console.log('tree drag over: ', dropNode.label);
            },
            handleDragEnd(draggingNode, dropNode, dropType, ev) {
                console.log('tree drag end: ', dropNode && dropNode.label, dropType);
            },
            handleDrop(draggingNode, dropNode, dropType, ev) {
                console.log('tree drop: ', dropNode.label, dropType);
            },
            allowDrop(draggingNode, dropNode, type) {
                if (dropNode.data.label === '二级 3-1') {
                    return type !== 'inner';
                } else {
                    return true;
                }
            },
            allowDrag(draggingNode) {
                return draggingNode.data.label.indexOf('三级 3-2-2') === -1;
            },
            async getWorks(eid){
                let id=new URLSearchParams();
                id.append("id",eid);
                await this.axios.post("/work/query",id).then(res=>{
                    console.log(res.data);
                    let works=[];
                    for (let i = 0; i < res.data.length; i++) {
                        works[i]={
                            id:res.data[i].wid,
                            label:res.data[i].task,
                            children:[{id:'999',label:"暂无二级数据"}]
                        };
                    }
                    this.data=works;
                });
            }
        }
    };
</script>
